<template>
  <div id="professor-course">
    <div>
      <el-button type="primary" round icon="el-icon-plus" style="box-shadow: 2px 2px 2px #ccc;margin-left: 20px"
        @click="toNewCourseUrl()">
        新建课程
      </el-button>
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input1"
                style="width: 200px;float: right" @keyup.enter.native="search()"></el-input>
    </div>
    <div style="margin-top: 30px">
      <ul style="list-style: none;padding: 0">
        <li v-for="(course,index) in courses">
          <div>
            <img :src="require(`@/assets/${course.courseCover}`)" style="width: 280px;height: 200px;border-radius: 20px;" @click="pcourseId(course.courseId,course.courseName)">
            <span>教</span>
          </div>
          <h3 @click="pcourseId(course.courseId,course.courseName)">{{course.courseName}}</h3>
          <h5>介绍：{{course.courseIntroduce}}</h5>
          <h5>老师：{{userName}}</h5>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ProfessorCourse",
  data() {
    return {
      input1: '',
      courses: [],
      userName:localStorage.getItem("userName")
    }
  },
  methods:{
    pcourseId(courseIndex, courseName){
      let courseInfo = {
        courseName: courseName,
        courseIndex: courseIndex
      }
      this.$store.commit("updateCourseName",courseInfo)
      // this.$router.push('/Section/SectionIndex')
      let routerUrl=this.$router.resolve({
        path:"/Teaching/TSectionIndex"
      })
      window.open(routerUrl.href)
    },
    toNewCourseUrl(){
        this.$router.push('/NewCourse')
    },
    search() {
      if (this.input1 == "") {
        return
      } else {
        for (var i = 0; i < this.courses.length; i++) {
          if (this.input1==this.courses[i].courseName){
            let courseInfo = {
              courseName: this.courses[i].courseName,
              courseIndex: this.courses[i].courseId
            }
            this.$store.commit("updateCourseName", courseInfo)
            // this.$router.push('/Section/SectionIndex')
            let routerUrl = this.$router.resolve({
              path: "/Section/SectionIndex"
            })
            window.open(routerUrl.href)
            break;
          }
        }
      }
    }
  },
  mounted() {
    axios('/course/showprofessorCourse', {
      params: {
        userId: localStorage.getItem("userId")
      },
      method: "get",
    }).then(res => {
      console.log(res.data)
      this.courses = res.data.data
    }).catch(function (error) {
      console.log(error);
    });
  }
}
</script>

<style scoped>
#professor-course{
  padding-bottom: 140px;
}
h5{
  margin: 0px;
  padding: 5px;
  font-size: 13px;
  color: #a8a8b3;
}
h3{
  margin: 0;
  padding: 10px;
}
li{
  margin-bottom: 20px;
  display:inline-block;
  padding-right:30px;
  padding-left: 30px;
  width: 330px;
}
img:hover{
  cursor:pointer;
}
h3:hover{
  cursor:pointer;
  color: cornflowerblue;
}
span{
  position: absolute;
  margin-left: -260px;
  margin-top: -10px;
  background: deepskyblue;
  padding: 10px;
  color: white;
  border-radius: 8px;
  font-weight: bold;
  height: 25px;
}
</style>
